<template>
  <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick"
   :before-leave="tabLeaveBeforeCallBack">

   <!-- 基本信息 -->
    <el-tab-pane label="基本信息" name="0">
      <slot name="goodInfo">
        基本信息默认模板
      </slot>
    </el-tab-pane>

    <!-- 商品参数 -->
    <el-tab-pane label="商品参数" name="1">
      <slot name="goodOption">
        默认参数
      </slot>
    </el-tab-pane>

    <!-- 商品动态参数 -->
    <el-tab-pane label="商品属性" name="2">
      <slot name="manyGoodOption">动态默认模板</slot>
    </el-tab-pane>

    <!-- 商品图片 -->
    <el-tab-pane label="商品图片" name="3">
      <slot name="goodPic">商品图片默认文本</slot>
    </el-tab-pane>

    <!-- 商品内容 -->
    <el-tab-pane label="商品内容" name="4">
      <slot name="goodContent">
        商品内容
      </slot>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// 请求
import { getGoodOptionDataList } from '@/network/goodOptionRequest';

export default {
  data () {
    return {
      activeName: '0'
    }
  },
  props: {
    addFormObj: Object,
    manyOptionList: Array, // 商品参数数据
    onlyOptionList: Array, // 静态商品参数列表
  },
  computed: {
    getCateId() { // 获取级联选择框的id
      return this.addFormObj.goods_cat.length === 3 ? this.addFormObj.goods_cat[2] : null;
    }
  },
  methods: {
    handleClick() { // tag栏点击事件
      this.$bus.$emit('tagClick', parseInt(this.activeName));
    },
    tabLeaveBeforeCallBack(activeName, oldActiveName) { // tab栏离开之前的回调函数
      // 由基本信息跳转过来的
      if (oldActiveName === '0') { // 判断是否满足条件
        if (this.addFormObj.goods_cat.length !== 3) {
          this.$message.error('请将级联选择框选择完整');
          return false;
        }

        // 满足条件
        switch (activeName) {
          case '1': 
            this.getGoodOptionRequest(this.getCateId, 'many');  
            break;
          case '2':
            this.getGoodOptionRequest(this.getCateId, 'only');
            break;
        }
        return true;
      }

      // 不是由基本信息跳转过来的
      switch (activeName) {
          case '1': 
            this.getGoodOptionRequest(this.getCateId, 'many');  
            break;
          case '2':
            this.getGoodOptionRequest(this.getCateId, 'only');
            break;
      }
      return true;
    },    
    async getGoodOptionRequest(id, sel) { // 获取商品参数信息请求
      const {meta, data} = await getGoodOptionDataList(id, {sel});
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      if (sel === 'many') { // 当时动态数据时
        data.forEach(item => {
          item.attr_vals = item.attr_vals === '' ? [] : item.attr_vals.split(' ');
        })
        return this.$emit("update:manyOptionList", data);

      } else if (sel === 'only') { // 静态数据时
        // console.log(data);
        return this.$emit("update:onlyOptionList", data);
      }
      
    },
    
  }
}
</script>

<style>

</style>